<template>
  <a-button v-if="buttonTitle.length !== 0" style="margin-left: 10px" type="primary" @click="showDrawer">
    {{ buttonTitle }}
  </a-button>
  <a-drawer
    v-model:open="opening"
    :get-container="getContainer"
    :style="style"
    :width="width"
    :height="height"
    class="custom-class"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    style="color: red"
    :title="title"
    :placement="placement"
    @after-open-change="afterOpenChange"
  >
    <slot></slot>
  </a-drawer>
</template>
<script lang="ts" setup>
import type {DrawerProps} from "ant-design-vue"
const props = defineProps({
  buttonTitle: {
    default: "",
  },
  title: {
    default: "",
  },
  width: {
    default: "400px",
  },
  height:{
    default: ""
  },
  style: {
    default: () => ({}),
  },
  getContainer: {
    default: true,
  },
  placement:{
    default:<DrawerProps['placement']>"right"
  }
});
const emits = defineEmits(["open"])
const opening = defineModel("open", {
  default: false,
});
const afterOpenChange = (bool: boolean) => {
  console.log("open", bool);
};

const showDrawer = () => {
  opening.value = true;
  emits("open")
};
</script>